<template>
  <div class="teacher-management">
    <h3>{{ $t('message.manageTeachers') }}</h3>
    <p>{{ $t('message.teacherManagementDescription') }}</p>
    
    <div class="teacher-list">
      <el-table :data="teachers" style="width: 100%" stripe>
        <el-table-column prop="username" :label="$t('message.username')" width="150" />
        <el-table-column prop="email" :label="$t('message.email')" width="200" />
        <el-table-column prop="university" :label="$t('message.university')" width="200" />
        <el-table-column prop="teachingExperience" :label="$t('message.experience')" width="150" />
        <el-table-column prop="registrationDate" :label="$t('message.registrationDate')" width="150" />
        <el-table-column :label="$t('message.actions')" width="200">
          <template #default="scope">
            <el-button size="small" @click="viewTeacher(scope.row)">{{ $t('message.view') }}</el-button>
            <el-button size="small" type="primary" @click="assignTask(scope.row)">{{ $t('message.assignTask') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';

export default {
  name: 'TeacherManagement',
  setup() {
    const { t } = useI18n();
    const teachers = ref([
      {
        id: 1,
        username: 'teacher1',
        email: 'teacher1@example.com',
        university: '清华大学',
        teachingExperience: '5年',
        registrationDate: '2024-01-15'
      },
      {
        id: 2,
        username: 'teacher2',
        email: 'teacher2@example.com',
        university: '北京大学',
        teachingExperience: '3年',
        registrationDate: '2024-02-20'
      }
    ]);

    const viewTeacher = (teacher) => {
      ElMessage.info(`${t('message.viewing')} ${teacher.username}`);
    };

    const assignTask = (teacher) => {
      ElMessage.success(`${t('message.assigningTaskTo')} ${teacher.username}`);
    };

    onMounted(() => {
      console.log('Teacher management component mounted');
    });

    return {
      teachers,
      viewTeacher,
      assignTask,
      t
    };
  }
};
</script>

<style scoped>
.teacher-management {
  padding: 20px;
}

.teacher-list {
  margin-top: 20px;
}
</style>